<script lang="ts" setup>
import router from "@/router/index";
import { useRoute } from "vue-router";

import LContainer from "@/components/layout/LContainer.vue";
import { ref } from "vue";

const route = useRoute();

const activeName = ref(route.query.name || "base");

const handleClick = (tab: any) => {
  router.push({
    path: route.path,
    query: {
      name: tab.props.name,
    },
  });
};
</script>

<template>
  <LContainer :scroll="false">
    <el-tabs class="h-full bg-white" type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="个人中心" name="personal">
        <template #label>
          <span class="custom-tabs-label flex items-center">
            <el-icon>
              <User />
            </el-icon>
            <span class="ml-1">个人中心</span>
          </span>
        </template>
        1
      </el-tab-pane>
      <el-tab-pane label="活动动态" name="activity">
        <template #label>
          <span class="custom-tabs-label flex items-center">
            <el-icon>
              <Bell />
            </el-icon>
            <span class="ml-1">活动动态</span>
          </span>
        </template>
        1
      </el-tab-pane>
      <el-tab-pane label="待办事项" name="schedule">
        <template #label>
          <span class="custom-tabs-label flex items-center">
            <el-icon>
              <calendar />
            </el-icon>
            <span class="ml-1">待办事项</span>
          </span>
        </template>
        1
      </el-tab-pane>
      <el-tab-pane label="消息记录" name="message">
        <template #label>
          <span class="custom-tabs-label flex items-center">
            <el-icon>
              <Tickets />
            </el-icon>
            <span class="ml-1">消息记录</span>
          </span>
        </template>
        1
      </el-tab-pane>
    </el-tabs>
  </LContainer>
</template>
